<template>
	<view class="add page c00">
		<view class="bgf7 p12">
			<view class="bgff px14 pb10">
				<picker :range="type" @change="typeChange">
					<view class="flex flexC borb py12">
						<text class="flex1">折扣券类型</text>
						<text class="py3">{{typeValue}}</text>
						<text class="arrowR ml3"></text>

					</view>
				</picker>
				<view class="flex flexC borb py12">
					<text class="flex1">所属店铺</text>
					<text class="py3">{{selectShop.name}}</text>
				</view>

				<view class="flex flexC borb py12">
					<text class="flex1">券标题</text>
					<input type="text" v-model="name" placeholder="券名字" class="py3 aliR" />
				</view>

				<picker mode="date" @change="selectDate">
					<view class="flex flexC borb py12">
						<text class="flex1">有效日期</text>
						<text class="py3">{{valid_time}}</text>
						<text class="arrowR ml3"></text>
					</view>
				</picker>
				<view class="flex flexC borb py12">
					<text class="flex1">使用时间段</text>
					<view class="flex flexC fs12 mt12">
						<picker mode="time" @change="dateStartChange">
							<text class="c99 w100 px12 py7 bor r40 mr10">{{startTime}}</text>
						</picker>
						<picker mode="time" @change="dateEndChange">
							<text class="c99 w100 px12 py7 bor r40 mr10">{{endTime}}</text>
						</picker>

					</view>
				</view>


				<view class="flex flexC borb py12" v-if="isShowTotal">
					<text class="flex1">总张数</text>
					<input type="number" v-model="num" placeholder="-1是不限制" class="py3 aliR" />
				</view>

				<view class="flex flexC borb py12">
					<text class="flex1">有效天数</text>
					<input type="number" v-model="valid_day" placeholder="用户领取之日开始计算时间" class="py3 aliR" />
				</view>

				<picker :range="discountType" @change="discountChange">
					<view class="flex flexC borb py12">
						<text class="flex1">折扣券类型</text>
						<text class="py3">{{discountTypeValue}}</text>
						<text class="arrowR ml3"></text>
					</view>
				</picker>

				<view class="flex flexC borb py12">
					<text class="flex1">折扣值</text>
					<input type="digit" v-model="discountValue" placeholder="请填写相应的折扣值" class="py3 aliR" />
				</view>



				<view class="flex flexS borb pb12 pt18">
					<text class="mr14 pt3">包厢范围</text>
					<view class="flex flexC flexW flex1">
						<text v-for="(item,index) in list" :key="index" @click="clickRoom(item)"
							class="mb6 r40 px12 py4 mr6" :class="item.check==true?'bged':'bgf6'">{{item.name}}</text>
					</view>
				</view>

				<view class="flex flexS borb pb12 pt18">
					<text class="mr14 pt3">日期范围</text>
					<view class="flex flexC flexW flex1">
						<text v-for="(item,index) in weekList" :key="index" @click="clickWeek(item)"
							class="mb6 r40 px12 py4 mr6" :class="item.check == true?'bged':'bgf6'">周{{item.name}}</text>
					</view>
				</view>



			</view>
			<view class="flex flexC flexJC py20">
				<view class="aliC py12 w-17 bg41 r40" @click="save">保存</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				room_id: '',
				detail: null,
				tagShow: false,
				name: '新人折扣券',
				hour: "",
				discountValue: "",
				num: "",
				valid_day: "",
				startTime: '00:00',
				endTime: "23:59",
				selectShop: null,
				list: [],
				type: ['新人券', '普通券'],
				isShowTotal: false,
				typeValue: '新人券',
				discountType: ['时长抵扣', '金额抵扣', '折扣抵扣'],
				discountTypeValue: '时长抵扣',
				valid_time: '',
				weekList: [{
					check: true,
					name: "一"
				}, {
					check: true,
					name: "二"
				}, {
					check: true,
					name: "三"
				}, {
					check: true,
					name: "四"
				}, {
					check: true,
					name: "五"
				}, {
					check: true,
					name: "六"
				}, {
					check: true,
					name: "日"
				}],
				notice: [{
						name: '该团购券不可使用余额购买,不可使用优惠券',

					}, {
						name: "该团购券使用范围,仅限指定的门店和包厢可用请注意查看"
					},
					{
						name: "过期作废,过期以后不支持退款"
					}
				]
			};
		},
		onLoad(option) {

			var select = option.selectShop;
			if (select != "") {
				this.selectShop = JSON.parse(select);
			}

			this.getDetail();
		},

		onShow() {

		},
		methods: {
			
			selectDate(e){
				var index = e.detail.value;
				console.info(index);
				this.valid_time = index;
			},
			typeChange(e) {
				var index = e.detail.value;
				this.typeValue = this.type[index];
				if (index == 0) {
					this.isShowTotal = false;
					this.name = "新人折扣券";
				} else {
					this.isShowTotal = true;
					this.name = "";
				}
				console.info("==index==" + index);
			},
			discountChange(e) {
				var index = e.detail.value;
				this.discountTypeValue = this.discountType[index];
			},

			clickRoom(item) {
				item.check = !item.check;
			},

			clickWeek(item) {
				item.check = !item.check;
			},

			addNotice() {
				var obj = new Object();
				obj.name = "";
				this.notice.push(obj);
			},

			dateStartChange(e) {
				this.startTime = e.detail.value;
			},

			dateEndChange(e) {
				this.endTime = e.detail.value;

			},



			save() {

				if (this.name == '') {
					uni.showToast({
						title: "请填写券标题"
					})
					return;
				}

				if (this.startTime == '开始时间' || this.endTime == '开始时间') {
					uni.showToast({
						title: "请选择时间"
					})
					return;
				}

				if (this.num == '' && this.typeValue != "新人券") {
					uni.showToast({
						title: "请填写券总数"
					})
					return;
				}

				if (this.valid_day == '') {
					uni.showToast({
						title: "请填写有效天数"
					})
					return;
				}

				if (this.discountValue == '') {
					uni.showToast({
						title: "请填写折扣值"
					})
					return;
				}



				var room = new Array();
				for (var i = 0; i < this.list.length; i++) {

					if (this.list[i].check == true) {
						room.push(this.list[i]);
					}
				}
				if (room.length == 0) {
					uni.showToast({
						title: "请点击选择包厢"
					})
					return;
				}

				var week = new Array();
				for (var i = 0; i < this.weekList.length; i++) {
					if (this.weekList[i].check == true) {
						week.push(this.weekList[i]);
					}
				}

				if (week.length == 0) {
					uni.showToast({
						title: "请点击选择日期"
					})
					return;
				}
				if(this.valid_time == ''){
					uni.showToast({
						title: "请选择有效日期"
					})
					return;
				}

				var noticeList = new Array();
				for (var i = 0; i < this.notice.length; i++) {
					if (this.notice[i].name != "") {
						noticeList.push(this.notice[i]);
					}
				}

				if (noticeList.length == 0) {
					uni.showToast({
						title: "请添加使用注意事项"
					})
					return;
				}


				let param = {

					shop_id: this.selectShop.id,
					name: this.name,
					startTime: this.startTime,
					endTime: this.endTime,
					num: this.num,
					valid_day: this.valid_day,
					room: JSON.stringify(room),
					type: this.typeValue,
					discountType: this.discountTypeValue,
					discountValue: this.discountValue,
					week: JSON.stringify(week),
					valid_time: this.valid_time
				}


				this.$api.addDiscount(param).then(res => {

					if (res.code == 1) {
						uni.showModal({
							title: "添加提示",
							content: "添加成功",
							showCancel: false,
							complete() {
								uni.navigateBack({
									delta: 1
								})
							}
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},





			getDetail() {
				let param = {
					shop_id: this.selectShop.id
				};
				let that = this;
				this.$api.getRoomList(param).then(res => {

					console.info(JSON.stringify(res));
					if (res.code == 1) {
						that.list = res.data;
					} else {

					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.add {
		.w48 {
			width: 96rpx;
			height: 96rpx;
		}

		.imgbox {
			width: 164rpx;
			height: 164rpx;
			background-color: #E8E8E8;
			position: relative;

			image {
				width: 100%;
				height: 100%;
			}

			.del {
				width: 36rpx;
				height: 36rpx;
				background: rgba(181, 180, 180, .8);
				position: absolute;
				top: -12rpx;
				right: -12rpx;
			}
		}
	}

	.popup-content2 {
		background: #FFFFFF;

		.popup-btn {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			border-bottom: 1px solid #f5f5f5;
			background: #FFFFFF;
		}

		.button {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			border-bottom: 1px solid #f5f5f5;
			background: #FFFFFF;
			font-size: 11pt;
		}

		button::after {
			border: none;
		}

		.pt20 {
			border-bottom: 20rpx solid #f5f5f5;
		}
	}
</style>